<!--  -->
<template>
  <div>
    records {{ params.typeid }}
<!-- {{state.lists}} -->

 <div>

    <el-form :inline="true" :model="params" class="demo-form-inline">
    <el-form-item label="关键字">
      <el-input v-model="params.key" placeholder="请输入关键字" clearable />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="onSearch">搜索</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onAdd">添加</el-button>
    </el-form-item>
  </el-form>
 </div>

<el-table :data="state.lists" style="width: 100%" max-height="250">
    <el-table-column fixed prop="id" label="ID" width="60" />
    <el-table-column   label="图片" >

        <template #default="scope">

          <el-image
      style="width: 50px; height: 50px"
      :src="imgBaseUrl+scope.row.photo"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="[imgBaseUrl+scope.row.photo]"
      :initial-index="4"
      fit="cover"
    />

        
      </template>
         
    </el-table-column>
    <el-table-column prop="title" label="标题" />
 
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button
          type="primary"
          size="small"
          @click.prevent="editRow(scope.row.id)"
        >
          修改
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.row.id)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  {{isAddShow}}
 <AddRecord :typeid="params.typeid" :id="editId" v-if="isAddShow" @close="closeHandle"  />
  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
import {getList} from '../services/records/records'
import {RecordParams} from '../services/records/type'
import AddRecord from '../components/AddRecord.vue'
const imgBaseUrl=import.meta.env.VITE_IMG_URL;
const route=useRoute();
console.log(route.params.typeid);

const isAddShow=ref(false);
const editId=ref(0);


const params = reactive<RecordParams>({
    key:"",
    typeid:route.params.typeid,
    page:1,
    psize:10
})
const state = reactive({
    lists:[]
})
//获取列表数据
const getData=async ()=>{

    console.log(9999,params);
    

    const res:any=await getList(params).catch(()=>{});
    console.log(1111,res);
    if(res?.errCode===10000){

        state.lists=res.data.list;

    }
    
}
//删除
const deleteRow=(id:number)=>{
    alert(id);

}
//修改
const editRow=(id:number)=>{

  isAddShow.value=true;
  editId.value=id;
}
//搜索
const onSearch=()=>{
    params.page=1;
    getData();
}
const onAdd=()=>{
    editId.value=0;
    isAddShow.value=true;
}
const closeHandle=(val:boolean)=>{
  isAddShow.value=false;
  if(val){
    params.page=1;
    getData();
  }
}

onMounted(()=>{

    getData();
})


</script>
<style scoped>
</style>